Validation
Form Validation
Indicates a required field
HTML
<form action="javascript:void(0)">
<div class="field-group-message alert media error-summary" role="alert">
<div class="media-left"><span class="cfaicon-hazardous white" aria-hidden="true"></span></div>
<div class="media-body" id="errorSummary">
<ul class="list-unstyled">
<li class="error-item">This field is required.<a aria-label="This field is required. Edit" href="#passport-number">Edit</a></li>
<li class="error-item">This field is required.<a aria-label="This field is required. Edit" href="#passport-validation-day">Edit</a></li>
<li class="error-item">Month is a required field.<a aria-label="Month is a required field. Edit" href="#passport-validation-month">Edit</a></li>
<li class="error-item">Year is a required field.<a aria-label="Year is a required field. Edit" href="#passport-validation-year">Edit</a></li>
<li class="error-item">Employment Status is a required field.<a aria-label="Employment Status is a required field. Edit" href="#Employed">Edit</a></li>
<li class="error-item">Please select at least one color.<a aria-label="Please select at least one color. Edit" href="#red">Edit</a></li>
</ul>
</div>
</div>
<fieldset class="error-summary-before">
<legend> Validation </legend>
<div class="form-group form-inline">
<label class="control-label required" for="passport-number"> Last four characters of passport number</label>
<input id="passport-number"
class="form-control"
type="text"
name="passportNumber"
aria-required="true"
data-val="true"
data-val-required="Last four characters of passport number is a required field."
data-val-length="Please enter last four characters of passport number."
data-val-length-min="4"
data-val-length-max="8"
data-rule-nowhitespace="true"
required="required" />
</div>
<div class="form-group form-inline">
<label class="control-label required" for="PersonId">CFA Institute ID (.NET 6)</label>
<input
class="form-control"
data-val-length="CFA Institute ID should be between 2 and 10 characters"
data-val-regex="CFA Institute ID should be a number."
data-val-required="CFA Institute ID is a required field."
data-val-length-max="10"
data-val-length-min="2"
data-val-regex-pattern="^\s*[0-9]+\s*$"
id="PersonId"
name="PersonId"
type="text"
value=""
required="required"
aria-required="true"
/>
</div>
<div class="form-group form-inline">
<label class="control-label required" for="PersonIdLegacy">CFA Institute ID (Legacy)</label>
<input
class="form-control"
data-msg-maxlength="CFA Institute ID should be 10 characters or less."
data-msg-pattern="CFA Institute ID should be a number."
data-msg-required="CFA Institute ID is a required field."
data-rule-maxlength="10"
data-rule-pattern="^\s*[0-9]+\s*$"
data-rule-required="true"
id="PersonIdLegacy"
name="PersonIdLegacy"
type="text"
value=""
aria-required="true"
autocomplete="off"
required="required"
/>
</div>
<div class="form-group form-inline row validation-input-container">
<label id="passport-validation"
class="control-label required"
for="passport-validation-day">
Passport Expiration Date
</label>
<div class="col-sm-4 col-md-2">
<span id="passport-validation-day-help-block" class="help-block">Day</span>
<input id="passport-validation-day"
class="form-control"
type="text"
name="passportDay"
data-val="true"
data-val-required="Day is a required field."
data-val-range="Please enter a valid Day."
data-val-range-min="1"
data-val-range-max="31"
data-val-number="Day should be a number."
placeholder="3"
aria-describedby="passport-validation-day-help-block"
aria-labelledby="passport-validation"
aria-required="true"
required="required" />
</div>
<div class="col-sm-4 col-md-3">
<span id="passport-validation-month-help-block" class="help-block">Month</span>
<select id="passport-validation-month"
class="form-control"
name="passportMonth"
role="combobox"
data-val="true"
data-val-number="The field Month must be a number."
data-val-required="Month is a required field."
data-val-range="Please enter a valid Manth."
data-val-range-min="1"
data-val-range-max="12"
data-msg-required="Month is a required field."
aria-describedby="passport-validation-month-help-block"
aria-labelledby="passport-validation"
aria-required="true"
required="required">
<option value=""></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-sm-4 col-md-2">
<span id="passport-validation-year-help-block" class="help-block">Year</span>
<input id="passport-validation-year"
class="form-control"
name="passportYear"
type="text"
data-val="true"
data-msg-max="Year must be lower than 2027."
data-msg-min="Year must be grater than 2023."
data-msg-number="The field Year must be a number."
data-msg-required="Year is a required field."
data-rule-max="2027"
data-rule-min="2023"
data-rule-number="true"
data-rule-required="true"
placeholder="2027"
aria-describedby="passport-validation-year-help-block"
aria-labelledby="passport-validation"
aria-required="true"
required="required" />
</div>
</div>
<div class="form-group form-inline">
<label class="control-label required" for="resident-id">
Chinese Resident ID
</label>
<input id="resident-id"
class="form-control"
type="text"
name="residentId"
aria-required="true"
data-val="true"
data-val-required="Resident ID is a required field."
data-val-regex="Chinese Resident ID Number (居民身份证) characters 1 thru 17 must be numerals. Character 18 can be alphanumeric."
data-val-regex-pattern="^\d{17}[\d\w]$"
data-rule-nowhitespace="true"
required="required" />
</div>
<div class="form-group validation-input-container">
<label id="professionalInformationLabel" class="control-label required">Professional Information</label>
<span id="professionalInformationHelpBlock" class="help-block">Which best describes your current employment status?</span>
<div class="radio">
<label for="Employed">
<input data-msg-required="Employment Status is a required field."
data-rule-required="true"
required="required"
aria-required="true"
id="Employed"
name="Status"
type="radio"
value="Employed"
aria-labelledby="professionalInformationLabel"
aria-describedby="professionalInformationHelpBlock" />
<span class="radio-label">Employed</span>
</label>
</div>
<div class="radio">
<label for="Self-employed">
<input data-msg-required="Employment Status is a required field."
data-rule-required="true"
required="required"
aria-required="true"
id="Self-employed"
name="Status"
type="radio"
value="Self-employed"
aria-labelledby="professionalInformationLabel"
aria-describedby="professionalInformationHelpBlock" />
<span class="radio-label">Self-employed</span>
</label>
</div>
<div class="radio">
<label for="Student">
<input data-msg-required="Employment Status is a required field."
data-rule-required="true"
required="required"
aria-required="true"
id="Student"
name="Status"
type="radio"
value="Student"
aria-labelledby="professionalInformationLabel"
aria-describedby="professionalInformationHelpBlock" />
<span class="radio-label">Student</span>
</label>
</div>
<div class="radio">
<label for="Unemployed">
<input data-msg-required="Employment Status is a required field."
data-rule-required="true"
required="required"
aria-required="true"
id="Unemployed"
name="Status"
type="radio"
value="Unemployed"
aria-labelledby="professionalInformationLabel"
aria-describedby="professionalInformationHelpBlock" />
<span class="radio-label">Unemployed</span>
</label>
</div>
<div class="radio">
<label for="Retired">
<input data-msg-required="Employment Status is a required field."
data-rule-required="true"
required="required"
aria-required="true"
id="Retired"
name="Status"
type="radio"
value="Retired"
aria-labelledby="professionalInformationLabel"
aria-describedby="professionalInformationHelpBlock" />
<span class="radio-label">Retired</span>
</label>
</div>
</div>
<div class="form-group validation-input-container">
<div id="checkboxColorLabel" class="control-label required">Color Options</div>
<span id="checkboxColorHelpBlock" class="help-block">Select a color option</span>
<div class="checkbox">
<label for="red">
<input id="red"
type="checkbox"
value=""
data-rule-required="true"
data-val="true"
data-msg-required="Please select at least one color."
aria-required="true"
name="color"
aria-labelledby="checkboxColorLabel"
aria-describedby="checkboxColorHelpBlock" />
<span class="checkbox-label">Red</span>
</label>
</div>
<div class="checkbox">
<label for="green">
<input id="green"
type="checkbox"
value=""
data-rule-required="true"
data-val="true"
data-msg-required="Please select at least one color."
aria-required="true"
name="color"
aria-labelledby="checkboxColorLabel"
aria-describedby="checkboxColorHelpBlock" />
<span class="checkbox-label">Green</span>
</label>
</div>
<div class="checkbox">
<label for="blue">
<input id="blue"
type="checkbox"
value=""
data-rule-required="true"
data-val="true"
data-msg-required="Please select at least one color."
aria-required="true"
name="color"
aria-labelledby="checkboxColorLabel"
aria-describedby="checkboxColorHelpBlock" />
<span class="checkbox-label">Blue</span>
</label>
</div>
<div class="checkbox">
<label for="orange">
<input id="orange"
type="checkbox"
value=""
data-rule-required="true"
data-val="true"
data-msg-required="Please select at least one color."
aria-required="true"
name="color"
aria-labelledby="checkboxColorLabel"
aria-describedby="checkboxColorHelpBlock" />
<span class="checkbox-label">Orange</span>
</label>
</div>
</div>
</fieldset>
<button>Validate form</button>
</form>
Problem Being Solved
Users need to know how to correct form errors.
When to Use
- Validation should be used on all fields that require a value. Validation should also be used for fields that require data to be entered in a specific format (e.g., email address) when the input is not dictated by the control type.
- Note that the pattern consists of both field-level messaging and an error box at the top of the page with jumplinks to the field. This approach supports screenreaders.
When Not to Use
Validation is not necessary if a field is optional and doesn’t require a specific data format.
Formatting
We use the jquery Validation plugin for front end validation, with some customizations for certain fields. See https://jqueryvalidation.org/
Added support of aspnetcore/Mvc. validation attributes.